<!-- 异动设置-人事异动 -->
<template>
  <div class="wrap">
    <div class="left-list">
      <div @click="collapse" class="collapseBtn">
        <IconCaretRight v-if="isCollapsed" />
        <IconCaretLeft v-else />
      </div>
      <a-layout class="layout-demo">
        <a-layout-sider
          collapsible
          breakpoint="xl"
          hide-trigger
          :collapsed="isCollapsed"
          :collapsed-width="0"
        >
          <div v-show="!isCollapsed">
            <div class="header">
              <span class="title">异动类型</span>
              <a-button type="text" @click="addType">新增</a-button>
            </div>
            <a-scrollbar style="height: 600px; overflow: auto">
              <div class="scroll">
                <div
                  class="scroll-item"
                  v-for="item in typeList"
                  :key="item.id"
                  @click="itemClick(item.id)"
                  :class="currId === item.id ? 'item-active' : ''"
                >
                  <div>{{ item.name }}</div>
                  <div v-if="item.sysDefault !== 1">
                    <a-tooltip content="编辑">
                      <IconFont
                        type="icon-edit"
                        :size="26"
                        :style="{
                          cursor: 'pointer'
                        }"
                        @click.stop="goEditType(item)"
                      />
                    </a-tooltip>
                    <a-tooltip content="删除" position="left">
                      <a-popconfirm
                        content="是否确认删除该条数据?"
                        @ok="delType(item.id)"
                      >
                        <IconFont
                          type="icon-delete"
                          :size="26"
                          :style="{
                            cursor: 'pointer'
                          }"
                          @click.stop
                        />
                      </a-popconfirm>
                    </a-tooltip>
                  </div>
                </div>
              </div>
            </a-scrollbar>
          </div>
        </a-layout-sider>
      </a-layout>
    </div>
    <div class="main-list">
      <ConditionBox :margin-bottom="20">
        <template #right>
          <a-button type="primary" @click="add">新增异动原因</a-button>
          <a-button type="outline" @click="del(null)" status="danger"
            >批量删除</a-button
          >
        </template>
      </ConditionBox>
      <table-turn
        v-if="currId"
        :table-data="getTableData"
        ref="tableRef"
        :args="args"
      >
        <a-table-column :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column :width="300" data-index="reason" title="异动原因">
        </a-table-column>
        <a-table-column :width="100" data-index="enable" title="启用状态">
          <template #cell="{ record }">
            <a-tag
              class="enable"
              :color="
                record.enable === 1
                  ? `rgb(var(--green-1))`
                  : 'rgb(var(--danger-1))'
              "
              :style="{
                color:
                  record.enable === 1
                    ? `rgb(var(--green-6))`
                    : 'rgb(var(--danger-6))',
                '--enable':
                  record.enable === 1
                    ? `rgb(var(--green-6))`
                    : 'rgb(var(--danger-6))'
              }"
            >
              {{ record.enable === 1 ? '启用' : '停用' }}
            </a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="200" data-index="" title="操作" fixed="right">
          <template #cell="{ record }">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="goEdit(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <icon-font
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer',
                    marginRight: '10px'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table-column>
      </table-turn>
    </div>
    <AddChange
      v-model:visible="modalVisible"
      :list="typeList"
      :currTypeId="currId"
      :data="currData"
      @changeAddEmit="changeAddEmit"
    ></AddChange>
    <AddChangeType
      v-model:visible="addChangeTypeModalVisible"
      :data="currData"
      :type="1"
      @changeAddTypeEmit="changeAddTypeEmit"
    />
  </div>
</template>

<script lang="ts" setup>
import {
  GetHumanChangeSetting,
  PostHumanChangeSetting,
  DelHumanChangeSetting,
  PutHumanChangeSetting,
  GetHumanChangeSettingType,
  PostHumanChangeSettingType,
  PutHumanChangeSettingType,
  DelHumanChangeSettingType
} from '@/apis/management/human/baseSetting/humanSetting';
import AddChange from './Components/AddChange/index.vue';
import AddChangeType from '../Components/AddChangeType/index.vue';
import { PERSONNEL_CHANGE } from '@/utils/constants';
import { Message, Modal } from '@arco-design/web-vue';

let currId = ref(); // 储存左侧列表选中的id

// 选择器配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});

let typeList = ref([]); // 异动类型列表
/**
 * 获取异动类型数据
 * @param isFirst 是否是进入页面的第一次请求
 */
const getTypeData = async (isFirst = false) => {
  try {
    const resp = await GetHumanChangeSettingType({
      name: '1'
    });
    typeList.value = resp;
    if (isFirst) currId.value = typeList.value[0].id;
  } catch (error: unknown) {
    console.log(error);
  }
};
getTypeData(true);
let addChangeTypeModalVisible = ref(false);
const addType = () => {
  currData.value = {};
  addChangeTypeModalVisible.value = true;
};

const changeAddTypeEmit = async (data: any) => {
  try {
    if (data.id) {
      await PutHumanChangeSettingType({
        ...data,
        type: 1
      });
    } else
      await PostHumanChangeSettingType({
        ...data,
        type: 1
      });
    getTypeData();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 左侧item点击事件
const itemClick = (id: number) => {
  if (currId.value !== id) {
    currId.value = id;
    tableRef.value.loadData();
  }
};

// 编辑类型
const goEditType = (record: any) => {
  currData.value = record;
  addChangeTypeModalVisible.value = true;
};

// 编辑类型
const delType = async (id: number) => {
  try {
    await DelHumanChangeSettingType({
      id
    });
    getTypeData();
  } catch (error: unknown) {
    console.log(error);
  }
};

let modalVisible = ref(false); // 判断新增弹出框是否打开

// 新增异动事件
const add = () => {
  currData.value = {};
  modalVisible.value = true;
};

const tableRef = ref(); // 表格的ref
/* 储存选择的数据 */
const selectedList = computed(() => tableRef.value.selectedList);
let currData = ref(); // 储存当前选中数据
// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    const resp = await GetHumanChangeSetting({
      ...pageData,
      changeType: currId.value //异动类型
    });
    return Promise.resolve(resp);
  } catch (error: unknown) {
    console.log(error);
  }
};

let isCollapsed = ref(false); // 判断是否收起
const collapse = (collapsed: boolean) => {
  isCollapsed.value = !isCollapsed.value;
};

const goEdit = (record: any) => {
  console.log(record);
  currData.value = record;
  modalVisible.value = true;
};

// 删除某一行
const del = async (id: number | null) => {
  try {
    if (!id) {
      if (selectedList.value.length === 0) {
        Message.error('请至少选择一项！');
      } else {
        Modal.confirm({
          title: '提示',
          content: '确定要删除选中的数据吗？',
          onOk: async () => {
            try {
              await DelHumanChangeSetting({
                ids: selectedList.value
              });
              tableRef.value.selectedList = [];
              tableRef.value.loadData();
            } catch (error: unknown) {
              console.log(error);
            }
          }
        });
      }
    } else {
      await DelHumanChangeSetting({
        ids: [id]
      });
      tableRef.value.selectedList = [];
      tableRef.value.loadData();
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

// 修改状态
const stateChange = async (record: any) => {
  try {
    await PutHumanChangeSetting(record);
    tableRef.value.loadData();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 新增弹出框返回的
const changeAddEmit = async (formData: any) => {
  try {
    if (!formData) {
      currData.value = {};
    }
    // 编辑
    else if (formData.id) {
      formData.funcType = 1;
      await PutHumanChangeSetting(formData);
    }
    // 新增
    else {
      formData.funcType = 1;
      await PostHumanChangeSetting(formData);
    }
    tableRef.value.loadData();
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style scoped lang="less">
.wrap {
  display: flex;
  .left-list {
    position: relative;
    // padding: 10px;
    padding: 15px;

    .collapseBtn {
      position: absolute;
      z-index: 9;
      top: 40%;
      right: 15px;
      height: 70px;
      width: 15px;
      background-color: #eee;
      line-height: 70px;
      text-align: center;
      cursor: pointer;
    }

    .layout-demo {
      height: 100%;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #ccc;
      .title {
        line-height: 60px;
        // position: relative;
        // right: 55px;
      }
      .title::before {
        position: relative;
        top: 5px;
        left: 10px;
        display: inline-block;
        height: 20px;
        width: 5px;
        margin-right: 20px;
        border-radius: 2px;
        content: '';
        background-color: #165dff;
      }
    }

    // height: 300px;
    .scroll {
      padding: 10px;

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        padding: 0 10px;
        cursor: pointer;
      }
      &-item:hover {
        background-color: #f2f3f5;
        color: #165dff;
      }
    }
    .item-active {
      background-color: #f2f3f5;
      color: #165dff;
    }

    .item-active::before {
      position: absolute;
      display: inline-block;
      height: 50px;
      right: 0px;
      width: 5px;
      margin-right: 10px;
      border-radius: 2px;
      // transform: translateY(-50%);
      content: '';
      background-color: #165dff;
    }
  }

  .main-list {
    flex: 4;
    margin-left: 20px;
  }
}
.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
}
</style>
